import React from "react";
export default class APP1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      arr: [
        // { id: 0, name: 0 },
        // { id: 1, name: 1 },
        // { id: 2, name: 2 },
      ],
    };
  }

  btnchange = () => {
    this.setState((state) => ({ count: state.count + 1 }));

    this.state.arr.push({
      id: this.state.count,
      name: this.state.count,
    });
  };

  changelis(item) {
    // console.log(item, "点击的事件");
    this.props.changelis(item);
  }

  render() {
    const { name } = this.props;
    return (
      <div className="App">
        <header className="App-header">
          <p>{name || "reactDome项目1111"}</p>
          <p>You clicked {this.state.count} times</p>
          <button onClick={this.btnchange}>click btn</button>
          <ul>
            {this.state.arr.map((item, index) => (
              <li key={item.id} onClick={() => this.changelis(item)}>
                {item.name}
              </li>
            ))}
          </ul>
        </header>
      </div>
    );
  }
}
